<template>
  <!-- 分享弹窗组件 -->
  <u-popup
    :show="show"
    mode="bottom"
    bgColor="transparent"
    :closeable="true"
    :safe-area-inset-bottom="true"
    @close="handleClose"
  >
    <view class="share-popup">
      <!-- 弹窗头部 -->
      <view class="popup-header">
        <view class="popup-title">分享</view>
        <!-- <u-icon
          name="close"
          color="#999"
          size="16"
          @click="handleClose"
          class="close-btn"
        ></u-icon> -->
      </view>

      <!-- 选项容器 -->
      <view class="options-container">
        <!-- 下载海报选项 -->
        <view class="option-item" @click="handleDownload">
          <view>
            <image
              :src="IMAGE_URL+'/static/master/xzhb.png'"
              style="width: 88rpx; height: 88rpx"
            />
          </view>
          <text class="option-text">下载海报</text>
        </view>

        <!-- 分享链接选项 -->
        <view class="option-item" @click="handleShare">
          <view>
            <image
              :src="IMAGE_URL+'/static/master/fxlj.png'"
              style="width: 88rpx; height: 88rpx"
            />
          </view>
          <text class="option-text">分享链接</text>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </view>
  </u-popup>
</template>

<script>
import appConfig from "@/config/app.js";
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  name: "SharePopup",
  props: {
    // 控制弹窗显示/隐藏
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
    };
  },

  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("update:show", false);
      this.$emit("close");
    },

    // 下载海报处理
    handleDownload() {
      this.$emit("download");
      this.handleClose();
    },

    // 分享链接处理
    handleShare() {
      this.$emit("share");
      this.handleClose();
    },
  },
};
</script>

<style scoped lang="scss">
.share-popup {
  height: 362rpx;
  width: 100%;
  background: #fff;
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  padding: 40rpx 32rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.popup-indicator {
  width: 80rpx;
  height: 8rpx;
  background: #e5e5e5;
  border-radius: 4rpx;
  margin: 0 auto 20rpx;
}

.popup-header {
  display: flex;
  justify-content: center;
  margin-bottom: 80rpx;
  position: relative;

  .popup-title {
    font-size: 36rpx;
    color: #333333;
    text-align: center;
    line-height: 36rpx;
  }

  .close-btn {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
  }
}

.options-container {
  display: flex;
  justify-content: space-around;
  padding-bottom: 40rpx;

  .option-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .option-text {
      font-size: 24rpx;
      color: #666666;
    }
  }
}

.safe-area-bottom {
  height: env(safe-area-inset-bottom);
  background: #fff;
}
</style>
